<template>
  <view class="category">
    <!-- 搜索 -->
    <van-search
      shape="round"
      background="#d81e06"
      placeholder="请输入搜索关键词"
    />
    <!-- 内容-->
    <!-- 左侧导航标题 -->
    <van-tree-select
      :items="leftItems"
      height="calc(100vh - 54px)"
      :main-active-index="mainActiveIndex"
      @click-nav="onClickNav"
    >
      <!-- 右侧内容 -->
      <scroll-view
        class="sc_view"
        scroll-y
        :scroll-top="scrollTop"
        slot="content"
      >
        <!-- 第一层循环 -->
        <view
          class="category_group"
          v-for="(item, index) in rightContent"
          :key="index"
        >
          <!-- 小标题 -->
          <view class="cat_name">/ {{ item.cat_name }} /</view>
          <!-- 小商品内容 -->
          <view class="cat_list">
            <navigator
              :url="'/pages/goods_list/goods_list?id='+item2.cat_id"
              class="cat_item"
              v-for="(item2, index2) in item.children"
              :key="index2"
            >
              <!-- 图片 -->
              <image mode="widthFix" :src="item2.cat_icon"></image>
              <!-- 商品内容 -->
              <view>{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </van-tree-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 左侧标题
      leftItems: [],
      // 右边内容
      rightContent: [],
      mainActiveIndex: 0,
      // 接口返回值
      categories: [],
      // 控制 scroll-view标签的 滚动距离
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 拿数据
    const category = wx.getStorageSync("category");
    // 判断是否存在 时间是否过期
    if (!category || (Date.now() - category.time > 60 * 1000)) {
     this.getCategory()
    }else{
      uni.showLoading("加载中")
      // 数据没有过期
      this.categories = category.list;
      // 构造左侧的数据
      this.leftItems = this.categories.map((v) => ({ text: v.cat_name }));
      // 显示右侧的内容
      this.rightContent = this.categories[0].children;
      uni.hideLoading()
    }
  },
  methods: {
    // 封装请求
   async getCategory(){
       this.categories = await this.get({ url: "/categories" });
      // 缓存数据
      uni.setStorageSync("category", {
        time: Date.now(),
        list: this.categories,
      });
        // 构造左侧的数据
      this.leftItems = this.categories.map((v) => ({ text: v.cat_name }));
        // 显示右侧的内容
      this.rightContent = this.categories[0].children;
    },
    // 左侧点击事件
    onClickNav(event) {
      //  console.log(event.detail.index);
      const index = event.detail.index;
      this.rightContent = this.categories[index].children;
      this.scrollTop = Math.random();
    },
  },
};
</script>

<style lang="less">
.category_group {
  .cat_name {
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cat_list {
    display: flex;
    flex-wrap: wrap;
    .cat_item {
      width: 33.33%;
      text-align: center;
      image {
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
.sc_view {
  height: 100%;
}
</style>